<template>
	<view class="detail_params_main">
		<text class="text" style="text-align: center;">{{ disclaimer }}</text>
		<view class="sizes">
			<view class="size" v-for="(items, index) in size" :key="index">
				<span class='span' v-for="(item, index) in items" :key="index">{{ item }}</span>
			</view>
		</view>

		<view class="params" v-for="(item, index) in goodParams.info.set" :key="index">
			<span class='span'>{{ item.key }}</span>
			<span class='span'>{{ item.value }}</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DetailParams",
		props: {
			goodParams: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		computed: {
			disclaimer() {
				return this.goodParams.rule?.disclaimer;
			},
			size() {
				return this.goodParams.rule?.tables[0];
			},
		},
		mounted() {
			this.$emit("detailGoodResourceLoad");
		},
	};
</script>
<style lang="scss" scoped>
	.detail_params_main {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		flex-direction: column;
	}


	.params {
		display: flex;
		justify-content: space-around;
		padding: 10rpx;
		border-bottom: 2rpx solid rgb(212, 212, 212);
		width: 90%;
		margin: 0 auto;


	}

	.params:last-child{
		border: none;
	}

	.params .span:nth-child(1) {
		width: 20%;
	}

	.params .span:nth-child(2) {
		width: 60%;
		color: brown;
	}

	.sizes {
		margin: 0 20rpx;
		border: 2rpx solid saddlebrown;
		border-right: none;
		border-left: none;
	}

	.size {
		width: 90%;
		margin: 0 auto;
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
	}



	.size>.span:not(:nth-child(1)) {
		color: brown;
	}

	.text {
		display: block;
	}
</style>
